<template lang='pug'>
.row-box
  swiper(:options="swiperOption")
    swiper-slide(v-for="item in clist",:key="item.id")
      router-link.swiper-item(:to="`/detail/${item.cmmdtyCode}/${item.supplierCode}`",:class="small?'smallTyle':'bigTyle'")
        .img
          img(:src="item.cmmdtyCode | newImgUrl(item.cmmdtyImageSrc)" @error="error")
          i.mask
        p {{item.cmmdtyName}}
        template(v-if="item.price == -1 || item.price=='' || item.saleType == '1' || item.availableQty == '0' || item.availableQty == ''")
          span.rmb(v-if="item.price !== '-1' && item.price !== ''") &yen;
          span.now-price.wh(v-if="item.price == '-1' || item.price == ''") 暂无报价
          span.now-price(v-else) {{item.price}}
          span(v-if="item.basePrice != null && item.basePrice != item.price && item.basePrice.length < 5 && item.price.length < 5 && item.basePrice != ''").old-price &yen;{{item.basePrice}}
          .wuhuoicon
        template(v-else)
          span.rmb &yen;
          span.now-price {{item.price}}
          span(v-if="item.basePrice != null && item.basePrice != item.price && item.basePrice.length < 5 && item.price.length < 5 && item.basePrice != ''").old-price &yen;{{item.basePrice}}
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  props: {
    clist: {
      type: Array,
      default: function (){
        return []
      }
    },
    small: {
      type: Boolean,
      default: false
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      iswuhuo: false,
      swiperOption: {
        slidesPerView: "auto",
        paginationClickable: true,
        freeMode: true,
        // lazyLoading: true
      }
    }
  },
  methods: {
    error(e) {
      e.target.src = "/static/images/pro-default.png"
    }
  }
}
</script>
<style lang='scss' scoped>
@import './tool.scss';
.row-box {
  height: _(364);
  padding-top: _(20);
  .swiper-slide {
    width: _(226);
    .swiper-item {
      .img {
        width: _(210);
        height: _(210);
        // margin: 0 auto;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        .mask {
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: _(210);
          height: _(210);
          background-color: rgba(0, 0, 0, .03)
        }
      }
    }
    .bigTyle {
      height: _(364);
      p {
        display: block;
        width: _(210);
        height: _(68);
        margin-top: 10px;
        font-size: _(26);
        line-height: _(34);
        text-align: left;
        // white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
    .smallTyle {
      height: _(344);
      p {
        display: block;
        width: _(210);
        height: _(34);
        margin-top: 10px;
        font-size: _(26);
        line-height: _(34);
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    padding-left: _(16);
  }
  p {
    display: block;
    width: _(210);
    height: _(68);
    margin-top: 10px;
    font-size: _(26);
    line-height: _(34);
    text-align: left;
    // white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .wuhuoicon {
    width: _(140);
    height: _(140);
    background: url('/static/images/soldout.png');
    background-size: 100% 100%;
    z-index: 3;
    position: absolute;
    right: _(35);
    // margin: auto;
    top: _(30);
  }
  .now-price,
  .old-price {
    display: inline-block;
    line-height: _(50);
  }
  .now-price,
  .rmb {
    font-size: _(30);
    color: #ff782d;
  }
  .rmb {
    font-size: _(22);
  }
  .old-price {
    margin-left: _(13);
    font-size: _(26);
    color: #aaa;
    text-decoration: line-through
  }
  .wh {
    color: #aaa;
  }
  .brd {
    display: inline-block;
    margin-left: _(12);
    padding: 0 _(12);
    font-size: _(18);
    color: #ff782d;
    border: 1px solid #ff782d;
    border-radius: 100px;
    text-align: center;
    line-height: _(25);
  }
}
</style>